import { Component } from "react";

interface IProps {
  isAllChecked: boolean;
  value: string;
  onChange: (value: string) => void;
  onConfirm: (value: string) => void;
  onToggle: (checked: boolean) => void;
}

export default class TodoHeader extends Component<IProps> {
  render() {
    const { isAllChecked, value, onChange, onConfirm, onToggle } = this.props;

    return (
      <header className="header">
        <input
          type="checkbox"
          checked={isAllChecked}
          onChange={(e) => {
            onToggle(e.target.checked);
          }}
        />
        <input
          className="new-todo"
          placeholder="What needs to be done?"
          value={value}
          onChange={(e) => onChange(e.target.value)}
          onKeyUp={(e) => {
            if (e.key === "Enter") {
              onConfirm(value);
            }
          }}
        />
      </header>
    );
  }
}
